<template>            
	<view>
		<view class="container bg-white" style="height: 435upx;">
			<view class="cover-view-top-left">
				<view class="top-text-left " style="margin-right: 20upx;z-index: 9999;">
					<view style="padding-left: 20upx;padding-top: 20upx;" >
						<button class="cu-btn cuIcon" @click="back">
							<text class="iconfont icon-fanhui" style="font-size: 80upx;"></text>
						</button>
					</view>
				</view>
			</view>
			<view class="bg-img bg-mask" style="height: 435upx;" :style="{backgroundImage:'url('+webUrl + user_Info.u_background_path + ')'}" >
				<view class="cu-avatar xl round" style="width: 150upx;height: 150upx;margin-top: 280upx;margin-left: 40%;" :style="{backgroundImage:'url('+webUrl + user_Info.u_face_image_path + ')'}"></view>
			</view>
			<view class="bg-white flex justify-start" style="margin-left: 15upx;margin-top: 5upx;">
				<text style="font-size: 40upx;">
					{{user_Info.username}}
				</text>
			</view>
			<view class="bg-white flex justify-start" style="margin-left: 5upx;">
				<view class="cu-capsule" style="margin-left: 10upx;">
					<view class='cu-tag bg-red'>
						<text class='cuIcon-likefill'></text>
					</view>
					<view class="cu-tag">
						{{user_Info.stars_counts}}
					</view>
				</view>
				<view class="cu-capsule" style="margin-left: 20upx;">
					<view class='cu-tag bg-green'>
						<text class='iconfont icon-guanzhu'></text>
					</view>
					<view class="cu-tag ">
						{{user_Info.fans_counts}}
					</view>
				</view>
			</view>
			<view class='text-center bg-white'>
				<button class="cu-btn bg-blue round lg" style="margin-bottom: 5upx;" @tap="focus(user_Info.id)">+关注</button>
			</view>
			<view class="bg-white">
				<view class="grid margin-bottom text-center col-3">
					<view v-for="item in videoList" :key="item.id" @click="gotoVideoInfo(item.id)">
						<view style="height: 340upx;" class="bg-cyan">
							<image style="height: 340upx;" :src=webUrl+item.cover_path mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,mapMutations
	}from 'vuex'
	export default {
		computed:{
			...mapState(['hasLogin','webUrl']),
		},
		onLoad(e) {
			uni.request({
				url:this.webUrl+'/user/query?userId='+e.user_id,
				success: (res) => {
					console.log(res)
					this.user_Info = res.data.data
					console.log(this.user_Info)
				}
			})
			uni.request({
				url:this.webUrl+'/user/queryVideoByUserId?id='+e.user_id,
				success(res) {
					this.videoList = res.data.data
				}
			})
		},
		data() {
			return {
				user_Info:'',
				videoList:'',
			}
		},
		methods: {
			focus(id){
				console.log(id)
			},
			back(){
				console.log("返回")
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="stylus">
	.container {
			.change_img {
				margin-left:10%;
				padding-top:3%;
			}
			.head_portrait {
				margin-left:25upx;
				margin-top:250upx;
			}
			.id_name_Box {
				width:100%;
				height:120upx;
			}
		.cover-view-top-left {
			display: flex;
			position: absolute;
			height: 100upx;
			width: 100%;
			top: 30upx;
			z-index: 9999;
			color: #FFFFFF;
			//#ifndef APP-PLUS-NVUE
			white-space: pre-wrap;  
			text-overflow:ellipsis;
			overflow:hidden;
			//#endif
		}
	}
	
</style>
